<template>
  <div class="callPolice">
    <HeaderLayout></HeaderLayout>
    <div style="height: 90%">
      <h2 style="padding: 20px 0; text-align: center; color: #fff">
        历史报警
        <el-button
          @click="routerReplace('/ErrorListActive')"
          type="warning"
          style="margin-left: 20px"
        >
          返回
        </el-button>
      </h2>
      <div
        style="display: flex; justify-content: center; margin: 30px; align-items: center"
      >
        <span style="margin-right: 20px; color: #fff">请选择时间段 :</span>
        <el-date-picker
          v-model="timeValue.createTime"
          type="date"
          placeholder="Pick a day"
          @change="selectedDate"
          :size="size"
        />
      </div>
      <CallPoliceList :data-list="warningData" height="70%" :width="900"></CallPoliceList>
      <div
        class="example-pagination-block"
        style="display: flex; justify-content: center;margin-top:1%"
      >
        <!-- <div class="example-demonstration">When you have more than 7 pages</div> -->
        <el-pagination
          layout="prev, pager, next"
          :total="timeValue.total"
          :default-page-size="15"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { routerPush, routerReplace } from "@/plugins/index.js";
import CallPoliceList from "./component/CallPoliceList.vue";
import HeaderLayout from "@/layout/HeaderLayout.vue";
import { http } from "@/api/http.js";
import moment from "moment";

let nowDate = moment().format("YYYY-MM-DD");
let timeValue = reactive({
  createTime: nowDate,
  pageNo: 1,
  pageSize: 15,
  total: 15,
});
let warningData = ref(null);
let getListDate = async () => {
  let res = await http("GET")("/getList", {
    ...timeValue,
  });
  warningData.value = res.offsideIPage.records;
  timeValue.total = res.offsideIPage.total;
};
let changePage = async (pageNo) => {
  timeValue.pageNo = pageNo;
  getListDate();
  console.log("changePage:", pageNo);
};
let selectedDate = async (val) => {
  timeValue.createTime = moment(val).format("YYYY-MM-DD HH:mm:ss");
  getListDate();
};

onMounted(() => {
  getListDate();
});
</script>

<style scoped>
.callPolice {
  margin: auto auto;
  width: 100%;
  height: 100%;
  background: rgb(45, 73, 97);
}
</style>
